1 1 00:00:01,410 --> 00:00:04,380 دعونا الآن نستخدم قوة فقاعات الأحداث 2 2 00:00:04,380 --> 00:00:07,413 لتنفيذ شيء يسمى تفويض الحدث. 3 3 00:00:09,050 --> 00:00:10,440 إذن ماذا سنفعل، 4 4 00:00:10,440 --> 00:00:13,400 هو تنفيذ سلوك التمرير السلس 5 5 00:00:13,400 --> 00:00:14,840 في الملاحة، 6 6 00:00:14,840 --> 00:00:17,800 لذلك عندما نضغط على أحد هذه الروابط هنا، 7 7 00:00:17,800 --> 00:00:21,120 سيتم بعد ذلك التمرير بسلاسة تلقائيًا 8 8 00:00:21,120 --> 00:00:24,163 إلى القسم المقابل، كل الحق؟ 9 9 00:00:25,690 --> 00:00:28,550 والآن، عندما ننقر على أحد هذه الروابط، 10 10 00:00:28,550 --> 00:00:30,330 في الواقع يتحرك هناك، 11 11 00:00:30,330 --> 00:00:33,570 ولكن بالطبع نريد أن يحدث هذا بسلاسة. 12 12 00:00:33,570 --> 00:00:36,760 والآن دعونا نمضي قدمًا ونستخدم تفويض الحدث 13 13 00:00:36,760 --> 00:00:38,563 لتنفيذ هذا التنقل. 14 14 00:00:39,970 --> 00:00:43,890 وفي الواقع دعونا نفعل ذلك هنا في الجزء العلوي من الملف. 15 15 00:00:43,890 --> 00:00:46,680 إذن، هنا في البداية، سيكون لدي كل الكود 16 16 00:00:46,680 --> 00:00:49,560 وهذا في الواقع مرتبط حقًا بالصفحة، 17 17 00:00:49,560 --> 00:00:51,503 أثناء وجودنا هنا، لدينا الرمز 18 18 00:00:51,503 --> 00:00:54,733 التي كنا نستخدمها لتجربة بعض الأشياء. 19 19 00:00:56,440 --> 00:00:58,070 حسنًا؟ 20 20 00:00:58,070 --> 00:01:02,540 لذا فإن التنقل في الصفحة يأتي هنا 21 21 00:01:02,540 --> 00:01:04,023 بعد نافذة النموذج. 22 22 00:01:04,870 --> 00:01:08,570 دعونا الاستيلاء على هذا الرمز الفاصل هنا. 23 23 00:01:08,570 --> 00:01:12,120 وفي الواقع، يمكننا أيضًا وضع هذا الكود هنا، 24 24 00:01:12,120 --> 00:01:13,503 الذي كان للتمرير. 25 25 00:01:15,240 --> 00:01:17,780 لذلك، نحتاج أيضًا إلى هذا الرمز نشطًا 26 26 00:01:17,780 --> 00:01:21,423 من أجل جعل هذا الزر هنا يعمل، أليس كذلك؟ 27 27 00:01:22,620 --> 00:01:24,793 لذا دعونا نضع ذلك هنا ثانيًا، 28 28 00:01:26,716 --> 00:01:28,256 (نقرات الماوس) 29 29 00:01:28,256 --> 00:01:29,247 وحسنا. 30 30 00:01:29,247 --> 00:01:30,080 (نقرات الماوس) 31 31 00:01:30,080 --> 00:01:31,953 وهذا هنا، 32 32 00:01:31,953 --> 00:01:34,786 (نقرات لوحة المفاتيح) 33 33 00:01:37,380 --> 00:01:38,330 حسنًا. 34 34 00:01:38,330 --> 00:01:40,210 وهذه الاختيارات 35 35 00:01:40,210 --> 00:01:43,803 سأضعهم جميعًا هنا في الأعلى، حسنًا؟ 36 36 00:01:44,870 --> 00:01:48,090 إذن هذه منظمة أجمل قليلاً 37 37 00:01:48,090 --> 00:01:50,870 مثلما حدث في المشروع الأخير، 38 38 00:01:50,870 --> 00:01:55,870 كل الاختيارات في سطر واحد جميل، حسنًا؟ 39 39 00:01:58,240 --> 00:02:00,650 (نقرات الماوس) 40 40 00:02:00,650 --> 00:02:02,490 الآن حصلنا على هذا الخطأ هنا، 41 41 00:02:02,490 --> 00:02:05,630 أنه تم بالفعل الإعلان عن btnScrollTo. 42 42 00:02:05,630 --> 00:02:09,690 أوه، وذلك لأننا أردنا بالفعل قطع هذا الرمز. 43 43 00:02:09,690 --> 00:02:11,373 لذلك لم نعد نريده هنا. 44 44 00:02:13,549 --> 00:02:14,470 (نقرات الماوس) 45 45 00:02:14,470 --> 00:02:15,310 حسنا. 46 46 00:02:15,310 --> 00:02:17,770 لذلك، نقوم بتنظيفه قليلاً. 47 47 00:02:17,770 --> 00:02:21,040 لذا دعونا لا نذهب فعليًا إلى المكان الموجود في الكود 48 48 00:02:21,040 --> 00:02:24,650 حيث نريد تنفيذ التنقل في الصفحة. 49 49 00:02:24,650 --> 00:02:26,850 الآن دعونا ننفذ هذا أولاً 50 50 00:02:26,850 --> 00:02:29,290 دون استخدام تفويض الحدث 51 51 00:02:29,290 --> 00:02:32,030 حتى تتمكن من رؤية المشكلة في النهج 52 52 00:02:32,030 --> 00:02:34,280 التي كنا نستخدمها حتى الآن. 53 53 00:02:34,280 --> 00:02:38,173 لذا دعونا الآن نختار كل هذه الروابط الثلاثة هنا. 54 54 00:02:40,050 --> 00:02:43,263 إذن document.querySelector، 55 55 00:02:44,330 --> 00:02:46,977 وفي الواقع يجب أن يكون querySelectorAll، 56 56 00:02:46,977 --> 00:02:48,600 (نقرات الماوس) 57 57 00:02:48,600 --> 00:02:51,380 وبعد ذلك كما رأينا بالفعل في الفيديو السابق، 58 58 00:02:51,380 --> 00:02:54,533 يتم استدعاؤهم، nav__link، حسنًا؟ 59 59 00:02:57,770 --> 00:03:00,470 لذلك سيعود هذا بقائمة العقد، 60 60 00:03:00,470 --> 00:03:02,470 والآن يمكننا استخدامه لكل طريقة 61 61 00:03:02,470 --> 00:03:06,170 من أجل إرفاق معالج الحدث لكل عنصر من العناصر 62 62 00:03:06,170 --> 00:03:08,160 الموجودة في قائمة العقدة. 63 63 00:03:08,160 --> 00:03:11,074 لذا في الواقع، تمامًا كما فعلنا هنا، 64 64 00:03:11,074 --> 00:03:12,530 (نقرات الماوس) 65 65 00:03:12,530 --> 00:03:13,363 أليس كذلك؟ 66 66 00:03:14,480 --> 00:03:15,313 تمام. 67 67 00:03:16,170 --> 00:03:19,273 لذلك لكل، 68 68 00:03:20,820 --> 00:03:24,313 وهكذا، وظيفة رد الاتصال لدينا هنا، 69 69 00:03:25,660 --> 00:03:29,493 الذي يحصل على الوصول إلى العنصر الحالي في قائمة العقدة. 70 70 00:03:30,450 --> 00:03:32,300 وهكذا لكل عنصر، 71 71 00:03:32,300 --> 00:03:36,273 لنستخدم الآن طريقة إضافة مستمع الحدث. 72 72 00:03:38,720 --> 00:03:42,460 لذلك أنقر، ثم وظيفة رد اتصال أخرى. 73 73 00:03:42,460 --> 00:03:45,310 إذن لدينا الآن رد اتصال داخل رد الاتصال، 74 74 00:03:45,310 --> 00:03:48,760 لكن هذه ليست مشكلة على الإطلاق، حسنًا؟ 75 75 00:03:48,760 --> 00:03:51,940 لذا، نريد هنا مرة أخرى الوصول إلى الحدث، 76 76 00:03:51,940 --> 00:03:56,670 والآن لنبدأ بتسجيل الدخول إلى وحدة التحكم، والرابط، 77 77 00:03:56,670 --> 00:03:57,673 تماما مثل هذا. 78 78 00:03:59,500 --> 00:04:03,160 وبالفعل حصلنا على الرابط هنا، وعلى هذا، 79 79 00:04:03,160 --> 00:04:05,780 وأيضا على هذا واحد. 80 80 00:04:05,780 --> 00:04:08,010 لذلك الرابط ثلاث مرات. 81 81 00:04:08,010 --> 00:04:10,450 الآن بدأت بالفعل في رؤية المشكلة، 82 82 00:04:10,450 --> 00:04:14,020 وهو أنه بالنقر الافتراضي على أحد هذه الروابط، 83 83 00:04:14,020 --> 00:04:16,810 سيتم التمرير إلى الموضع في HTML. 84 84 00:04:16,810 --> 00:04:19,543 وذلك بسبب ما يسمى بالمراسي. 85 85 00:04:20,550 --> 00:04:22,950 اسمحوا لي أن أعرضها لكم في HTML. 86 86 00:04:22,950 --> 00:04:26,420 ولذلك تسمى هذه هنا بالمراسي. 87 87 00:04:26,420 --> 00:04:29,910 لذا التجزئة، ثم بعض الأسماء هنا، 88 88 00:04:29,910 --> 00:04:32,840 سينتقل تلقائيًا إلى الصفحة الثانية من العنصر، 89 89 00:04:32,840 --> 00:04:35,303 الذي لديه معرف هذا. 90 90 00:04:36,380 --> 00:04:38,863 لذلك دعونا نرى، هنا لدينا، 91 91 00:04:41,240 --> 00:04:45,450 نعم، هنا لدينا هذا القسم مع القسم الثاني للمعرف. 92 92 00:04:45,450 --> 00:04:47,350 وهكذا عندما نضغط هنا، 93 93 00:04:47,350 --> 00:04:50,770 سيتم الانتقال تلقائيًا إلى هذا القسم بالضبط. 94 94 00:04:50,770 --> 00:04:55,520 ويمكننا رؤيته هنا أيضًا في شريط URL، أليس كذلك؟ 95 95 00:04:55,520 --> 00:05:00,370 لذلك نحن بحاجة في الأساس إلى منع حدوث ذلك. 96 96 00:05:00,370 --> 00:05:02,670 اسمحوا لي أن أضع هذا مرة أخرى هنا، 97 97 00:05:02,670 --> 00:05:07,460 لأننا في محاضرتنا الأخيرة حذفنا هذا القسم الأول 98 98 00:05:07,460 --> 00:05:08,293 كان ذلك هنا. 99 99 00:05:11,130 --> 00:05:12,590 وهكذا، كما كنت أقول، 100 100 00:05:12,590 --> 00:05:17,590 نحن بحاجة إلى منع هذه السلوكيات الافتراضية. 101 101 00:05:17,780 --> 00:05:18,853 وهكذا من أجل ذلك، 102 102 00:05:20,100 --> 00:05:25,090 نستخدم مرة أخرى الحدث أو E في هذه الحالة، 103 103 00:05:25,090 --> 00:05:26,743 نقطة منع الافتراضي. 104 104 00:05:28,220 --> 00:05:29,523 ولذا دعونا نرى الآن، 105 105 00:05:30,990 --> 00:05:33,440 وبالفعل الآن لم يحدث شيء. 106 106 00:05:33,440 --> 00:05:36,060 لذلك لم نعد ننتقل إلى الصفحة، 107 107 00:05:36,060 --> 00:05:38,410 وترى أن شريط URL 108 108 00:05:38,410 --> 00:05:42,650 في الواقع أيضًا لم يعد يتغير عندما ننقر هنا. 109 109 00:05:42,650 --> 00:05:44,530 وهكذا تم إصلاح تلك المشكلة، 110 110 00:05:44,530 --> 00:05:47,373 والآن دعونا ننفذ التنقل السلس، 111 111 00:05:48,670 --> 00:05:51,680 أو التمرير السلس، في الواقع. 112 112 00:05:51,680 --> 00:05:54,640 لأنه إذا لم نرغب في أن يكون التمرير سلسًا، 113 113 00:05:54,640 --> 00:05:57,230 عندها لن نحتاج في الواقع لأي من هذا، 114 114 00:05:57,230 --> 00:05:59,100 لأننا رأينا بالفعل أن المتصفح 115 115 00:05:59,100 --> 00:06:02,380 سوف ينتقل تلقائيًا إلى ذلك المكان. 116 116 00:06:02,380 --> 00:06:05,820 إذن إلى هذا المرساة الذي حددناه في HTML. 117 117 00:06:05,820 --> 00:06:08,700 الآن، تلك المرساة، على أية حال، 118 118 00:06:08,700 --> 00:06:12,890 لذا فإن هذا الجزء هنا سيظل مفيدًا جدًا 119 119 00:06:12,890 --> 00:06:16,570 لأنه يمكننا الآن أن نأخذ هذه السمة href. 120 120 00:06:16,570 --> 00:06:19,580 لذلك يمكننا أن نأخذ هذه القيمة هنا، 121 121 00:06:19,580 --> 00:06:22,690 وحدد العنصر الذي نريد التمرير إليه، 122 122 00:06:22,690 --> 00:06:24,370 بناء على هذا. 123 123 00:06:24,370 --> 00:06:26,290 لأنه إذا فكرنا في هذا، 124 124 00:06:26,290 --> 00:06:29,350 يبدو هذا في الواقع مثل المحدد إلى حد كبير 125 125 00:06:29,350 --> 00:06:31,173 للحصول على بطاقة هوية، أليس كذلك؟ 126 126 00:06:32,350 --> 00:06:34,100 لذلك اسمحوا لي أن أكتب الرمز هنا، 127 127 00:06:34,100 --> 00:06:36,200 وبعد ذلك سأشرح أكثر قليلا. 128 128 00:06:37,240 --> 00:06:42,240 لذلك دعونا نحصل على هذا href في الواقع، وسأسميه ID. 129 129 00:06:44,620 --> 00:06:49,620 إذن هذا هو العنصر الحالي، تذكر، 130 130 00:06:49,840 --> 00:06:53,643 نقطة getAttribute، ثم href. 131 131 00:06:58,040 --> 00:06:58,950 تمام؟ 132 132 00:06:58,950 --> 00:07:02,050 ولقد استخدمت وظيفة getAttribute هنا 133 133 00:07:02,050 --> 00:07:04,150 لأنه كما تعلمنا من قبل، 134 134 00:07:04,150 --> 00:07:08,700 في الواقع، أريد فقط ذلك الجزء الذي نكتبه حرفيًا هنا. 135 135 00:07:08,700 --> 00:07:11,900 لذلك لا أريد عنوان URL المطلق، 136 136 00:07:11,900 --> 00:07:16,900 ولهذا السبب لا أستطيع أن أكتب هذا ببساطة.href. 137 137 00:07:20,140 --> 00:07:20,973 تذكر ذلك. 138 138 00:07:22,540 --> 00:07:24,590 على أية حال، دعونا الآن نسجل هذا في وحدة التحكم 139 139 00:07:26,460 --> 00:07:28,423 لنرى مرة أخرى ما نقوم به هنا. 140 140 00:07:29,470 --> 00:07:32,560 وهكذا، كما ترون، حصلنا الآن على القسم الأول هنا، 141 141 00:07:32,560 --> 00:07:34,890 اثنان وثلاثة. 142 142 00:07:34,890 --> 00:07:37,370 والآن، كما كنت أقول من قبل، 143 143 00:07:37,370 --> 00:07:41,880 يبدو هذا هنا إلى حد كبير مثل المحدد بالفعل. 144 144 00:07:41,880 --> 00:07:45,220 ولذا يمكننا الآن أن نأخذ هذا، ونختار عنصرًا، 145 145 00:07:45,220 --> 00:07:49,420 بناءً على هذا، ثم انتقل ببساطة إلى هذا العنصر. 146 146 00:07:49,420 --> 00:07:50,253 لذا من أجل ذلك، 147 147 00:07:50,253 --> 00:07:54,840 سنستخدم طريقة التمرير إلى العرض هنا مرة أخرى. 148 148 00:07:54,840 --> 00:07:56,203 لذلك اسمحوا لي أن أظهر لك ذلك. 149 149 00:07:57,710 --> 00:08:00,853 إذن document.querySelector، 150 150 00:08:02,020 --> 00:08:05,837 والآن كل ما أحتاجه للتمرير هو هذه الهوية، أليس كذلك؟ 151 151 00:08:07,540 --> 00:08:09,830 لأنه مرة أخرى، هذه السلسلة بالضبط 152 152 00:08:09,830 --> 00:08:12,400 التي نحصل عليها من السمة href، 153 153 00:08:12,400 --> 00:08:14,490 هو بالفعل المحدد المثالي. 154 154 00:08:14,490 --> 00:08:16,053 لذلك يمكننا فقط استخدام ذلك. 155 155 00:08:17,140 --> 00:08:18,210 تمام؟ 156 156 00:08:18,210 --> 00:08:20,330 وهذه تقنية شائعة جدًا 157 157 00:08:20,330 --> 00:08:24,130 التي نستخدمها لتنفيذ التنقل مثل هذا. 158 158 00:08:24,130 --> 00:08:27,810 لذلك نضع معرف العناصر التي نريد التمرير إليها 159 159 00:08:27,810 --> 00:08:29,910 هنا في سمة href، 160 160 00:08:29,910 --> 00:08:31,680 بحيث أنه في جافا سكريبت، 161 161 00:08:31,680 --> 00:08:33,570 يمكننا أن نقرأ ذلك، 162 162 00:08:33,570 --> 00:08:37,430 حتى نتمكن من قراءة هذا href، وبعد ذلك يمكننا تحديد العنصر 163 163 00:08:37,430 --> 00:08:39,260 الذي نريد التمرير إليه. 164 164 00:08:39,260 --> 00:08:43,480 إذن في هذه الحالة، العنصر ذو المعرف، القسم الأول. 165 165 00:08:43,480 --> 00:08:46,191 وهذا هو بالضبط هذا هنا. 166 166 00:08:46,191 --> 00:08:47,350 (نقرات الماوس) 167 167 00:08:47,350 --> 00:08:49,333 لذلك بالضبط القسم الأول. 168 168 00:08:51,590 --> 00:08:52,423 حسنًا؟ 169 169 00:08:53,570 --> 00:08:56,220 إذن هنا، لدينا العنصر المحدد الآن، 170 170 00:08:56,220 --> 00:08:59,447 والآن كل ما نحتاجه هو الاتصال،scrollIntoView، 171 171 00:09:01,101 --> 00:09:03,800 ومن ثم مع ضبط السلوك على نحو سلس. 172 172 00:09:03,800 --> 00:09:08,660 تمامًا كما فعلنا هنا من قبل، حسنًا؟ 173 173 00:09:08,660 --> 00:09:10,643 وهذا في الواقع هو بالفعل. 174 174 00:09:13,460 --> 00:09:16,083 إذن، لقد نجح الأمر بشكل جميل، أليس كذلك؟ 175 175 00:09:20,070 --> 00:09:23,893 حسنًا، والآن الثالثة، وها نحن ذا. 176 176 00:09:27,050 --> 00:09:28,750 حسنا، هذا لم التمرير حقا 177 177 00:09:28,750 --> 00:09:30,783 إلى حيث اعتقدت أنه يجب أن يذهب. 178 178 00:09:32,140 --> 00:09:33,163 الآن، ولكن الآن فعلت. 179 179 00:09:34,331 --> 00:09:37,890 على ما يبدو حدث شيء غريب هناك، 180 180 00:09:37,890 --> 00:09:39,253 ولكن هذه ليست مشكلة. 181 181 00:09:40,110 --> 00:09:43,760 الآن، كما ترون، هذا في الواقع يعمل بشكل جيد، 182 182 00:09:43,760 --> 00:09:47,380 لكن المشكلة هي أنها ليست فعالة حقًا. 183 183 00:09:47,380 --> 00:09:52,283 لذا فإننا نضيف هنا نفس وظيفة رد الاتصال بالضبط، 184 184 00:09:53,670 --> 00:09:56,060 لذلك معالج الحدث هنا، 185 185 00:09:56,060 --> 00:10:00,220 فنحن نضيفه مرة واحدة إلى كل عنصر من هذه العناصر الثلاثة. 186 186 00:10:00,220 --> 00:10:03,140 لذلك تم الآن إرفاق نفس الوظيفة بالضبط 187 187 00:10:03,140 --> 00:10:04,980 لهذه العناصر الثلاثة. 188 188 00:10:04,980 --> 00:10:07,600 وهذا نوعاً ما غير ضروري. 189 189 00:10:07,600 --> 00:10:11,470 أعني، بالطبع سيكون جيدًا لثلاثة عناصر فقط، 190 190 00:10:11,470 --> 00:10:16,380 ولكن ماذا لو كان لدينا 1000 أو 10000 عنصر؟ 191 191 00:10:16,380 --> 00:10:18,320 إذا أردنا إرفاق معالج الحدث 192 192 00:10:18,320 --> 00:10:21,130 إلى 10.000 عنصر مثل هذا، 193 193 00:10:21,130 --> 00:10:24,150 كما فعلنا هنا مع الدالة forEach، 194 194 00:10:24,150 --> 00:10:27,660 عندها سنتمكن فعليًا من إنشاء 10000 نسخة 195 195 00:10:27,660 --> 00:10:30,090 من هذه الوظيفة نفسها هنا. 196 196 00:10:30,090 --> 00:10:33,620 وهذا من شأنه أن يؤثر بالتأكيد على الأداء. 197 197 00:10:33,620 --> 00:10:37,360 وهو في الحقيقة ليس حلاً نظيفًا في هذه الحالة. 198 198 00:10:37,360 --> 00:10:40,200 وبالتالي فإن الحل الأفضل بلا أدنى شك، 199 199 00:10:40,200 --> 00:10:42,580 هو استخدام تفويض الأحداث. 200 200 00:10:42,580 --> 00:10:44,090 لذا في حدث التفويض، 201 201 00:10:44,090 --> 00:10:47,040 نحن نستخدم حقيقة أن الأحداث تتصاعد. 202 202 00:10:47,040 --> 00:10:49,490 ونحن نفعل ذلك عن طريق وضع الحدث 203 203 00:10:49,490 --> 00:10:52,210 على أصل مشترك لجميع العناصر 204 204 00:10:52,210 --> 00:10:54,210 التي نحن مهتمون بها. 205 205 00:10:54,210 --> 00:10:55,810 وهكذا في مثالنا، 206 206 00:10:55,810 --> 00:11:00,810 إنها هذه الحاوية التي تحيط بكل هذه الروابط، 207 207 00:11:01,050 --> 00:11:03,490 وهذا ما رأيناه في الفيديو السابق. 208 208 00:11:03,490 --> 00:11:07,970 لذا تذكر أن هذا هو العنصر هنا. 209 209 00:11:07,970 --> 00:11:11,450 لذلك سوف نضع معالج الحدث الخاص بنا على هذا العنصر هنا، 210 210 00:11:11,450 --> 00:11:14,730 وبعد ذلك عندما ينقر المستخدم على أحد الروابط، 211 211 00:11:14,730 --> 00:11:17,860 يتم إنشاء الحدث، وتتصاعد الفقاعات، 212 212 00:11:17,860 --> 00:11:20,460 تماما كما رأينا في الفيديو الأخير. 213 213 00:11:20,460 --> 00:11:23,490 ومن ثم يمكننا التقاط هذا الحدث بشكل أساسي 214 214 00:11:23,490 --> 00:11:26,820 في هذا العنصر الأصلي المشترك، والتعامل معه هناك. 215 215 00:11:26,820 --> 00:11:30,770 لأننا نعرف أيضًا المكان الذي نشأ فيه الحدث بالفعل. 216 216 00:11:30,770 --> 00:11:31,830 يمين؟ 217 217 00:11:31,830 --> 00:11:33,220 حتى نتمكن من معرفة ذلك 218 218 00:11:33,220 --> 00:11:35,803 من خلال النظر إلى الخاصية events.target. 219 219 00:11:38,010 --> 00:11:40,920 إذن هذا هو تفويض الحدث، 220 220 00:11:40,920 --> 00:11:43,783 لذا دعونا الآن نمضي قدمًا وننفذه. 221 221 00:11:46,240 --> 00:11:49,280 حسنًا، في حالة التفويض، 222 222 00:11:49,280 --> 00:11:51,870 نحن في الأساس بحاجة إلى خطوتين. 223 223 00:11:51,870 --> 00:11:55,560 أولاً، نضيف مستمع الحدث إلى العنصر الأصلي المشترك 224 224 00:11:55,560 --> 00:11:58,350 لجميع العناصر التي نحن مهتمون بها. 225 225 00:11:58,350 --> 00:12:00,110 لذا اسمحوا لي أن أكتبها هنا، 226 226 00:12:00,110 --> 00:12:02,823 لأن هذه تقنية مهمة حقًا. 227 227 00:12:04,410 --> 00:12:05,660 (نقرات لوحة المفاتيح) 228 228 00:12:05,660 --> 00:12:10,660 كما قلت، أضف مستمع الحدث إلى العنصر الأصلي المشترك. 229 229 00:12:13,620 --> 00:12:15,383 ومن ثم في ذلك الحدث أيها المستمع، 230 230 00:12:17,090 --> 00:12:20,533 تحديد العنصر الذي نشأ الحدث. 231 231 00:12:24,490 --> 00:12:27,930 حتى نتمكن بعد ذلك من العمل مع هذا العنصر 232 232 00:12:27,930 --> 00:12:29,893 حيث تم إنشاء الحدث بالفعل. 233 233 00:12:31,700 --> 00:12:33,393 لذلك، دعونا نفعل ذلك. 234 234 00:12:34,830 --> 00:12:36,503 مستند استعلام محدد، 235 235 00:12:39,570 --> 00:12:43,890 ولذا تذكر العنصر المشترك بين كل هذه الروابط، 236 236 00:12:43,890 --> 00:12:44,723 هو nav__links. 237 237 00:12:46,400 --> 00:12:47,853 لذا مرة أخرى، هذا هو، 238 238 00:12:49,550 --> 00:12:50,863 نعم، هذا هو العنصر. 239 239 00:12:52,030 --> 00:12:54,599 وهذا هو المكان الذي نضيف فيه مستمع الحدث، 240 240 00:12:54,599 --> 00:12:57,432 (نقرات لوحة المفاتيح) 241 241 00:13:02,930 --> 00:13:04,700 والآن نحن بحاجة فقط لمعرفة ذلك 242 242 00:13:04,700 --> 00:13:07,250 حيث وقع الحدث فعلا. 243 243 00:13:07,250 --> 00:13:12,250 وتذكر أنه تم تخزين ذلك في events.target، أليس كذلك؟ 244 244 00:13:14,080 --> 00:13:17,350 لذلك أصبح events.target مفيدًا حقًا الآن 245 245 00:13:17,350 --> 00:13:18,700 في هذه الاستراتيجية، 246 246 00:13:18,700 --> 00:13:21,240 لأنه يمكننا الآن استخدام هذه المعلومات 247 247 00:13:21,240 --> 00:13:25,793 بالضبط لمعرفة مكان وقوع هذا الحدث. 248 248 00:13:27,410 --> 00:13:30,123 لذا عندما أنقر هنا، يمكننا الآن أن نرى، 249 249 00:13:32,330 --> 00:13:36,170 حسنا، أن الحدث وقع من هذا العنصر. 250 250 00:13:36,170 --> 00:13:40,090 وعندما ننقر هنا، نرى أنها نشأت بالطبع، 251 251 00:13:40,090 --> 00:13:41,910 من هذا. 252 252 00:13:41,910 --> 00:13:42,810 تمام؟ 253 253 00:13:42,810 --> 00:13:45,600 وبينما ننقر في مكان ما هنا في المنتصف، 254 254 00:13:45,600 --> 00:13:48,030 ثم نرى أن النقرة حدثت بالطبع 255 255 00:13:48,030 --> 00:13:51,900 في هذا العنصر بأكمله، وليس في أحد الروابط. 256 256 00:13:51,900 --> 00:13:54,440 ومن المهم بالفعل ملاحظة هذا الجزء 257 257 00:13:54,440 --> 00:13:57,080 لأننا الآن نريد فقط العمل 258 258 00:13:57,080 --> 00:14:00,470 بالنقرات التي حدثت على أحد الروابط. 259 259 00:14:00,470 --> 00:14:02,860 لذلك فقط هذا، أو هذا، 260 260 00:14:02,860 --> 00:14:06,740 لكن النقرة التي تحدث هنا على عنصر nav__links هذا، 261 261 00:14:06,740 --> 00:14:08,500 ليست ذات صلة على الإطلاق. 262 262 00:14:08,500 --> 00:14:11,820 والآن نحن بحاجة إلى استراتيجية مطابقة هنا 263 263 00:14:11,820 --> 00:14:13,910 من أجل مطابقة العناصر فقط 264 264 00:14:13,910 --> 00:14:17,370 التي نحن مهتمون بها بالفعل الآن، أليس كذلك؟ 265 265 00:14:17,370 --> 00:14:19,410 وفي هذه الحالة، أفضل طريقة للقيام بذلك، 266 266 00:14:19,410 --> 00:14:24,003 هو التحقق ببساطة مما إذا كان الهدف يحتوي على فئة nav__link هذه. 267 267 00:14:25,570 --> 00:14:26,403 الآن، أليس كذلك؟ 268 268 00:14:28,830 --> 00:14:32,330 إذن هذه هي استراتيجية المطابقة. 269 269 00:14:32,330 --> 00:14:35,470 وقد يكون هذا في بعض الأحيان من أصعب الأمور 270 270 00:14:35,470 --> 00:14:37,849 للتوصل إلى ذلك، عند استخدام هذه التقنية. 271 271 00:14:37,849 --> 00:14:38,682 (نقرات لوحة المفاتيح) 272 272 00:14:38,682 --> 00:14:41,900 لكن في كثير من الأحيان، أفعل ذلك بهذه الطريقة. 273 273 00:14:41,900 --> 00:14:46,550 لذلك أتحقق مما إذا كان العنصر المستهدف يحتوي على الفصل 274 274 00:14:46,550 --> 00:14:47,850 التي نحن مهتمون بها. 275 275 00:14:48,950 --> 00:14:50,610 لذا قائمة الفئات، 276 276 00:14:50,610 --> 00:14:53,333 ثم تذكر أنه يمكننا استخدام الطريقة التي تحتوي على، 277 277 00:14:55,180 --> 00:14:56,980 وبعد ذلك يمكننا ببساطة التحقق 278 278 00:14:56,980 --> 00:14:59,957 إذا كان يحتوي على فئة nav__link. 279 279 00:15:01,480 --> 00:15:05,560 وهذا هو هذا هنا، أليس كذلك؟ 280 280 00:15:05,560 --> 00:15:10,193 وفقط إذا حدث ذلك، فلنقم بتسجيل الارتباط. 281 281 00:15:11,510 --> 00:15:12,343 لذلك دعونا نرى. 282 282 00:15:13,580 --> 00:15:16,813 لذلك عندما ننقر، نحصل على الرابط، وكما ترى، 283 283 00:15:17,800 --> 00:15:21,130 أو واحد آخر، ونحن أيضا الحصول على الرابط. 284 284 00:15:21,130 --> 00:15:23,020 ولكن عندما ننقر على مكان آخر، 285 285 00:15:23,020 --> 00:15:26,353 مثل هنا في المنتصف، فإننا لا نحصل على الارتباط. 286 286 00:15:27,230 --> 00:15:28,290 الآن، أليس كذلك؟ 287 287 00:15:28,290 --> 00:15:30,260 والآن نجحنا 288 288 00:15:30,260 --> 00:15:34,240 في الأساس تم تحديد عناصر الارتباط نفسها فقط. 289 289 00:15:34,240 --> 00:15:37,130 والآن يمكننا أن نفعل ذلك بالضبط 290 290 00:15:37,130 --> 00:15:38,513 ما فعلناه هنا من قبل. 291 291 00:15:39,530 --> 00:15:42,683 لذلك نحن في الواقع بحاجة أيضًا إلى منع التخلف عن السداد، 292 292 00:15:44,300 --> 00:15:46,023 ولذا دعونا نحصل على كل هذا، 293 293 00:15:50,720 --> 00:15:52,280 واستبدل ذلك هنا. 294 294 00:15:52,280 --> 00:15:57,260 تخلص من التعليقات، وهذا هنا، 295 295 00:15:57,260 --> 00:15:59,110 لذلك منع الافتراضي، 296 296 00:15:59,110 --> 00:16:01,600 نحن في الواقع نريد دائمًا أن نريد ذلك، 297 297 00:16:02,450 --> 00:16:03,573 أو للقيام بذلك. 298 298 00:16:04,410 --> 00:16:06,680 لذا، بغض النظر عن المكان الذي ننقر عليه، 299 299 00:16:06,680 --> 00:16:09,883 لا شيء يجب أن يحدث الآن، أليس كذلك؟ 300 300 00:16:10,850 --> 00:16:12,703 لذا، دعونا نحاول ذلك. 301 301 00:16:13,970 --> 00:16:16,120 والآن، وهنا نحصل على هذا الخطأ، 302 302 00:16:16,120 --> 00:16:19,290 وكان لدينا فارغة، على السطر 87. 303 303 00:16:19,290 --> 00:16:21,010 هذا هو هذا الآن. 304 304 00:16:21,010 --> 00:16:24,150 وبطبيعة الحال، لا تزال لدينا مشكلة هنا 305 305 00:16:24,150 --> 00:16:28,000 لأن السمة href ليست الآن على هذا، 306 306 00:16:28,000 --> 00:16:31,200 ولكنه موجود على العنصر الذي تم النقر عليه. 307 307 00:16:31,200 --> 00:16:34,963 وهذا هو e.target مرة أخرى. 308 308 00:16:35,950 --> 00:16:39,480 وهذا هو السبب الكامل لاستخدامنا e.target 309 309 00:16:39,480 --> 00:16:40,623 في المقام الأول. 310 310 00:16:41,500 --> 00:16:44,590 لذلك دعونا نحاول الآن، وجميلة. 311 311 00:16:44,590 --> 00:16:46,223 الآن يعمل فعلا. 312 312 00:16:47,440 --> 00:16:50,230 كما ترون، لا نزال نحصل على نفس الأقسام هنا 313 313 00:16:50,230 --> 00:16:52,070 مغلق أيضًا على وحدة التحكم ، 314 314 00:16:52,070 --> 00:16:55,453 ويتم تمريره إلى المكان الذي نريده أن يذهب إليه بالضبط. 315 315 00:16:56,526 --> 00:16:57,670 (نقرات الماوس) 316 316 00:16:57,670 --> 00:16:58,503 مذهل. 317 317 00:16:59,440 --> 00:17:01,670 لذلك هذا يعمل بشكل جميل، 318 318 00:17:01,670 --> 00:17:06,170 ونعم، لقد نجحنا في تنفيذ تفويض الحدث، 319 319 00:17:06,170 --> 00:17:09,700 وهو أفضل بكثير وأكثر كفاءة 320 320 00:17:09,700 --> 00:17:12,290 من مجرد إرفاق نفس معالج الحدث 321 321 00:17:12,290 --> 00:17:14,020 إلى عناصر متعددة. 322 322 00:17:14,020 --> 00:17:17,560 بدلاً من ذلك، نقوم ببساطة بتحرير وظيفة واحدة كبيرة لمعالج الأحداث 323 323 00:17:17,560 --> 00:17:20,060 إلى العنصر الأصلي لجميع العناصر 324 324 00:17:20,060 --> 00:17:21,630 التي نحن مهتمون بها، 325 325 00:17:21,630 --> 00:17:23,030 وبعد ذلك قررنا ببساطة 326 326 00:17:23,030 --> 00:17:25,363 من أين جاء حدث النقر. 327 327 00:17:27,770 --> 00:17:30,900 ثم كنا بحاجة أيضًا إلى استراتيجية المطابقة هذه 328 328 00:17:30,900 --> 00:17:33,820 لأننا أردنا تجاهل النقرات بشكل أساسي 329 329 00:17:33,820 --> 00:17:38,193 لم يحدث ذلك بشكل صحيح على أحد هذه الروابط. 330 330 00:17:39,130 --> 00:17:41,870 والتوصل إلى استراتيجية المطابقة هذه، 331 331 00:17:41,870 --> 00:17:43,550 كما أحب أن أسميها 332 332 00:17:43,550 --> 00:17:45,280 ربما يكون الجزء الأصعب 333 333 00:17:45,280 --> 00:17:47,470 لتنفيذ تفويض الحدث. 334 334 00:17:47,470 --> 00:17:51,180 لكن لا تقلق لأنه سيكون هناك الكثير من الأمثلة 335 335 00:17:51,180 --> 00:17:53,090 طوال بقية الدورة. 336 336 00:17:53,090 --> 00:17:54,830 وهكذا، في مرحلة ما، 337 337 00:17:54,830 --> 00:17:57,440 كل هذا سيكون له معنى كبير بالنسبة لك. 338 338 00:17:57,440 --> 00:18:00,480 لذا آمل أن تكونوا مقتنعين بهذا الوفد 339 339 00:18:00,480 --> 00:18:02,410 هي استراتيجية أفضل بكثير، 340 340 00:18:02,410 --> 00:18:05,720 على الرغم من أنه يتطلب المزيد من العمل 341 341 00:18:05,720 --> 00:18:08,520 من التنفيذ الأول الذي قمنا به. 342 342 00:18:08,520 --> 00:18:09,353 وفي الواقع، 343 343 00:18:09,353 --> 00:18:12,310 هناك في الواقع حالة استخدام أكثر أهمية 344 344 00:18:12,310 --> 00:18:13,910 تفويض الحدث، 345 345 00:18:13,910 --> 00:18:16,640 وهو عندما نعمل مع العناصر 346 346 00:18:16,640 --> 00:18:20,380 التي ليست بعد على الصفحة في وقت التشغيل. 347 347 00:18:20,380 --> 00:18:22,700 لذلك بحلول الوقت الذي يتم فيه تحميل الصفحة. 348 348 00:18:22,700 --> 00:18:24,550 والمثال الرائع هو الأزرار 349 349 00:18:24,550 --> 00:18:28,370 التي تتم إضافتها ديناميكيًا أثناء استخدام التطبيق. 350 350 00:18:28,370 --> 00:18:31,080 لذلك ليس من الممكن إضافة معالجات الأحداث 351 351 00:18:31,080 --> 00:18:34,110 على عنصرين غير موجودين، 352 352 00:18:34,110 --> 00:18:36,760 لكننا سنظل قادرين على التعامل مع الأحداث 353 353 00:18:36,760 --> 00:18:40,070 على عناصر غير موجودة في البداية 354 354 00:18:40,070 --> 00:18:43,500 باستخدام تفويض الحدث مرة أخرى. 355 355 00:18:43,500 --> 00:18:46,333 وسوف نقوم بذلك بالفعل لاحقًا في هذا القسم.